<template>
	<view class="padd" v-loading.fullscreen.lock="fullscreenLoading">
		<el-alert title="尺寸：690*360,严格遵守图片尺寸" type="error" style="margin-bottom: 20px;">
		</el-alert>
		<view class="mg">
			<el-button type="primary" @click="addline">新 增</el-button>
		</view>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column type="index" :index="indexMethod">
			</el-table-column>
			<el-table-column prop="mainTitle" label="主标题">
			</el-table-column>
			<el-table-column prop="secondaryText" label="简介">
			</el-table-column>
			<el-table-column prop="picSrc" label="图片地址">
				<template slot-scope="scope">
					<image :src="scope.row.picSrc" mode="widthFix" class="pic1"></image>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="bianji(scope)">编辑</el-button>
					<el-button @click="handleClick(scope.row)" type="text" size="small" style="color: #FF0000;">删除
					</el-button>

				</template>
			</el-table-column>



		</el-table>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="900" :close-on-click-modal="false">
			<el-input type="text" v-model="row.row.mainTitle" clearable style="margin-bottom: 20px;" placeholder="输入主标题"/>
			<el-input type="text" v-model="row.row.secondaryText" clearable style="margin-bottom: 20px;" placeholder="输入简介"/>
			<el-image
			      style="width: 290px; height: auto"
			      :src="row.row.picSrc"></el-image>
			<view style="margin-bottom: 10px;">选择上传图片</view>
			<uni-file-picker return-type="object" v-model="imageValue" fileMediatype="image" mode="grid"
				@success="success"></uni-file-picker>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save()">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageValue: [],
				dialogVisible: false,
				fullscreenLoading: false,
				tableData: [],
				row: {
					row: {
						mainTitle: '',
						secondaryText: '',
						picSrc: ''
					}
				}
			};
		},
		onShow() {
			this.onLoading()
		},
		methods: {
			// 上传成功
			success(e) {
				console.log('上传成功', e)
				uniCloud.getTempFileURL({
						fileList: [e.tempFiles[0].url]
					})
					.then(res => {
						console.log('imageValue', this.imageValue)
						console.log('res', res)
						this.row.row.picSrc = res.fileList[0].fileID

					});
			},
			save() {
				console.log(this.row.row)
				this.fullscreenLoading = true
				uniCloud.callFunction({
					name:'banner',
					data:Object.assign(this.row.row,{sign:4})
				}).then((res)=>{
					this.fullscreenLoading = false
					this.dialogVisible = false
					this.onLoading()
				})
				
				
			},
			bianji(r) {
				this.row = {
					row: {
						mainTitle: '',
						secondaryText: '',
						picSrc: ''
					}
				}
				this.dialogVisible = true
				console.log(r)
				this.row = r
			},
			onLoading() {
				this.fullscreenLoading = true
				uniCloud.callFunction({
					name: 'banner',
					data: {
						sign: 1
					} //标示：查询用，必填
				}).then((res) => {
					console.log('res', res)
					if (res.result.data.length > 0) {
						this.tableData = res.result.data
						this.fullscreenLoading = false
					} else {
						this.fullscreenLoading = false
						this.$message.error('数据初始化错误，刷新啊！')
					}
				})
			},
			handleClick(row) {
				this.$confirm('确认删除？')
					.then(_ => {
						this.fullscreenLoading = true
						uniCloud.callFunction({
							name: 'banner',
							data: {
								_id: row._id,
								sign: 2
							}
						}).then((res) => {
							console.log(res)
							this.fullscreenLoading = false
							this.onLoading()
						})
						console.log(1111)
						done();
					})
					.catch(_ => {});
				console.log(row);
			},
			indexMethod(index) {
				return index + 1;
			},
			addline() {
				this.fullscreenLoading = true
				uniCloud.callFunction({
					name:'banner',
					data:{
						sign:3
					}
				}).then((res)=>{
					this.fullscreenLoading = false
					this.onLoading()
				})
				/* this.tableData.push({
					mainTitle: '',
					secondaryText: '',
					picSrc: ''
				}) */
			}
		}
	}
</script>

<style lang="scss">
	.pic1 {
		width: 300rpx;
		height: auto;
	}
</style>
